<script setup lang="ts">
import AppIndex from '@/AppIndex.vue'
import { darkTheme } from 'naive-ui'
import { NConfigProvider } from 'naive-ui'
import { isDark } from '@/hooks/useDark'

const themeOverrides = {
  common: {
    primaryColor: `rgba(9, 18, 56, 0.7)`,
    primaryColorHover: `rgba(9, 18, 56, 0.7)`,
    primaryColorPressed: `rgba(9, 18, 56, 0.7)`,
    primaryColorSuppl: `rgba(9, 18, 56, 0.7)`,
    borderColor: `rgba(9, 18, 56, 0.2)`,
    scrollbarColor: `rgba(255, 255, 255, 0.2)`
  },
  Input: {
    colorFocus: `rgba(9, 18, 56, 1)`,
    textColor: `rgba(255, 255, 255, 1)`,
    caretColor: `rgba(255, 255, 255, 1)`
  },
  Layout: {
    color: 'rgba(16, 16, 20, 0)',
    footerColor: 'rgba(16, 16, 20, 0)'
  }
}
</script>

<template>
  <NConfigProvider
    :theme="isDark ? darkTheme : undefined"
    :theme-overrides="themeOverrides"
    class="transition duration-500"
  >
    <AppIndex />
  </NConfigProvider>
</template>

<style scoped></style>
